﻿
@{
    ViewBag.Title = Resources.WebStringsWeb.WebTitle;
    Layout = "~/Views/Shared/_LayoutMobile.cshtml";
}
@section css {
    <link href="~/Assets/css/searchmodal.css" rel="stylesheet" />
    <link href="~/Assets/css/mui.picker.min.css" rel="stylesheet" />
    <script src="~/Assets/js/mui.picker.js"></script>
    <script src="~/Assets/js/mui.picker.min.js"></script>
    <script src="~/Assets/js/mui.dtpicker.js"></script>
    <style>
        .mui-bar ~ .mui-content .mui-scroll-wrapper {
            height: auto;
        }

        .mui-card .mui-control-content {
            padding: 10px;
        }

        .mui-bar ~ .mui-content .mui-scroll-wrapper {
            top: 14px;
            height: auto;
        }

        .mui-control-content {
            height: 150px;
        }

        .imgicon {
            width: 3.2rem
        }

        .mui-badge {
            font-size: 10px;
            line-height: 1.4;
            position: absolute;
            top: 2px;
            left: 100%;
            margin-left: -35px;
            padding: 1px 5px;
            color: #fff;
            background: red;
        }

        .chart {
            height: 200px;
            margin: 0px;
            padding: 0px;
        }

        h5 {
            margin-top: 30px;
            font-weight: bold;
        }

            h5:first-child {
                margin-top: 15px;
            }

        .chart_title {
            font-weight: bold;
            margin: 5px;
            padding: 5px;
            border-bottom: 1px #CCCCCC solid;
        }

        .IsException {
            color: red;
        }

        .IsNormal {
            color: blue;
        }
    </style>
}
<div ng-cloak ng-controller="CheckFormController" ng-init="  PlaceId='@(Request.QueryString["PlaceId"].IsEmpty() ? "" : Request.QueryString["PlaceId"])';
                RoomId='@(Request.QueryString["RoomId"].IsEmpty() ? "" : Request.QueryString["RoomId"])';
                 PlaceName='@(Request.QueryString["PlaceName"].IsEmpty() ? "" : Request.QueryString["PlaceName"])';SearchModel={};SearchModel.PlaceId =PlaceId;SearchModel.RoomId= RoomId; SearchModel.StartTime='@DateTime.Now.ToString("yyyy-MM-01")';SearchModel.EndTime='@DateTime.Now.ToString("yyyy-MM-dd")';">
    <header class="mui-bar mui-bar-nav">
        <a href="../Home/MPlaceWork?RoomId={{RoomId}}&PlaceId={{PlaceId}}&PlaceName={{PlaceName}}" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
        <a id="menu-btn" class="mui-action-menu mui-icon mui-icon-search mui-pull-right"></a>
        <h1 class="mui-title" style="color:white;">{{PlaceName}}-检查台账</h1>
    </header>
    <div class="mui-content">
        <div style="padding: 10px 10px;">
            <div id="segmentedControl" class="mui-segmented-control">
                <a class="mui-control-item mui-active" href="#item1">台账统计</a>
                <a class="mui-control-item" href="#item2">台账列表</a>
            </div>
        </div>
        <div style="margin:0px;">
            <div id="item1" class="mui-control-content mui-active" style="height:680px;">
                <div class="mui-scroll-wrapper">
                    <div class="mui-card">
                        <p class="chart_title">检查类型分布 {{SearchModel.StartTime}}~{{SearchModel.EndTime}}</p>
                        <div id="checktypechart" class="chart">
                        </div>
                    </div>
                </div>
            </div>
            <div id="item2" class="mui-control-content" style="height:680px;">
                <div id="pullrefresh" class="mui-scroll-wrapper">
                    <div class="mui-scroll" id="checklist" ng-init="GetMyParkList();
                MGetCheckFormPageList(SearchModel,1);InitMyCheckFormListPage();">
                        <ul ng-cloak class="mui-table-view mui-table-view-chevron mui-table-view-striped mui-table-view-condensed">
                            <li ng-cloak class="mui-table-view-cell" ng-repeat="x in CheckFormPageList" id="{{x.FormId}}">
                                <a class="mui-navigate-right" href="../CheckForm/MDailyCheckFormDetail?FormId={{x.FormId}}">
                                    <div ng-cloak class="mui-table mui-slider-handle mui-media-body" ng-class="{'IsException':x.IsException}">

                                        <div ng-cloak class="mui-table-cell mui-col-xs-10" style="margin-right:20px;" ng-class="{'IsException':x.IsNormal}">
                                            <h5>{{$index+1}}.</h5>
                                            <h5>登记人：<b>{{x.CreateUserName}}</b></h5>
                                            <p ng-cloak class="mui-h6 mui-ellipsis">检查类型：<b>{{x.CheckTypeName}}</b></p>
                                            <p ng-cloak class="mui-h6 mui-ellipsis">检查结果：<b style="color:red;" ng-show="x.IsException">异常</b><b style="color:green;" ng-show="!x.IsException">正常</b></p>
                                        </div>
                                        <div ng-cloak class="mui-table-cell mui-col-xs-2 mui-text-right">
                                            <span ng-cloak class="mui-h5">{{x.CheckTime|JSONDate:'MM-dd'}}</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div id="menu-wrapper" class="menu-wrapper hidden" ng-init="GetMyCheckType(); InitDatePicker('#starttime');InitDatePicker('#endtime');">
        <div id="menu" class="menu">
            <form class="mui-input-group">
                <div class="mui-input-row">
                    <label>类型</label>
                    <select id="Dep_Select" ng-model="SearchModel.CheckType">
                        <option value="" selected>所有检查类型</option>
                        <option ng-repeat="x in CheckTypeList" value="{{x.Id}}">{{x.IntervalName}}</option>
                    </select>
                </div>
                <div class="mui-input-row">
                    <label>开始日期</label>
                    <input type="text" id="starttime" data-options='{"type":"date"}' ng-model="SearchModel.StartTime" readonly>
                </div>
                <div class="mui-input-row">
                    <label>结束日期</label>
                    <input type="text" id="endtime" data-options='{"type":"date"}' ng-model="SearchModel.EndTime" readonly>
                </div>
                <div class="mui-button-row">
                    <button type="button" onclick="toggleMenu();" ng-click="MGetCheckFormPageList(SearchModel,1);" class="mui-btn mui-btn-primary">查询</button>
                </div>
            </form>
        </div>
    </div>
    <div id="menu-backdrop" class="menu-backdrop"></div>
</div>

@section js{
    <script src="~/Assets/js/base/echart.min.js"></script>
    <script src="~/Assets/js/mui.pullToRefresh.js"></script>
    <script src="~/Assets/js/mui.pullToRefresh.material.js"></script>
    <script src="~/Assets/js/pg/MCheckForm.js?v=@DateTime.Now.ToString("yyyyMMddHH")"></script>

    <script>
        mui.init({
            swipeBack: false,
            keyEventBind: {
                backbutton: false  //关闭back按键监听
            }
        });
        mui.showLoading("正在加载..", "div");
        setTimeout(function () {
            mui.hideLoading();
        }, 2000);


        var menuWrapper = document.getElementById("menu-wrapper");
        var menu = document.getElementById("menu");
        var menuWrapperClassList = menuWrapper.classList;
        var backdrop = document.getElementById("menu-backdrop");
        var info = document.getElementById("info");

        backdrop.addEventListener('tap', toggleMenu);
        document.getElementById("menu-btn").addEventListener('tap', toggleMenu);
        //document.getElementById("icon-menu").addEventListener('tap', toggleMenu)
        //下沉菜单中的点击事件
        mui('#menu').on('tap', 'a', function () {
            toggleMenu();
            info.innerHTML = '你已选择：' + this.innerHTML;
        });
        var busying = false;

        function toggleMenu() {
            if (busying) {
                return;
            }
            busying = true;
            if (menuWrapperClassList.contains('mui-active')) {
                document.body.classList.remove('menu-open');
                menuWrapper.className = 'menu-wrapper fade-out-up animated';
                menu.className = 'menu bounce-out-up animated';
                setTimeout(function () {
                    backdrop.style.opacity = 0;
                    menuWrapper.classList.add('hidden');
                }, 500);
            } else {
                document.body.classList.add('menu-open');
                menuWrapper.className = 'menu-wrapper fade-in-down animated mui-active';
                menu.className = 'menu bounce-in-down animated';
                backdrop.style.opacity = 1;
            }
            setTimeout(function () {
                busying = false;
            }, 500);
        }

    </script>
}
